<template>
    <v-card style="margin-bottom: 2rem;">
        <v-card-actions class="lighten-4" @click="showBody = !showBody">
            <span class="v-btn v-size--default v-btn__content">{{ title }}</span>
            <v-spacer></v-spacer>
            <slot name="header-right" />
        </v-card-actions>
        <v-divider class="dashed"></v-divider>
        <v-slide-y-transition>
            <v-card-text v-show="showBody">
                <slot />
            </v-card-text>
        </v-slide-y-transition>

    </v-card>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    props: {
        title: {
            type: String,
            default: 'Title',
        },
    },
    data(): {
        showBody: boolean;
        } {
        return {
            showBody: true,
        };
    },
});
</script>
<style>
    .v-card .dashed.v-divider {
        border-style: dashed;
    }
    .v-card .v-card__text [class*=col-] {
        padding: 4px 12px 4px 12px;
    }
</style>
